<!DOCTYPE html>
<html>

<head>
    <title>藏宝图游戏</title>
</head>

<body>
    <h1 id="heading">找宝藏</h1>
    <img id="map" src="map.png" width="600" height="600">
    <p id="jl"></p>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    <script>
        var RV = function (v) {
            return Math.floor(Math.random() * v)
        }
        var ZB = {
            x: RV(600),
            y: RV(600)
        }
        var cishu = 0


        var jlmc = function (jl) {
            if (jl < 10) {
                return "就在这儿了！"
            } else if (jl < 20) {
                return "很近了！"
            } else if (jl < 40) {
                return "不远了！"
            } else if (jl < 80) {
                return "有点远了！"
            } else if (jl < 160) {
                return "太远了！"
            } else if (jl < 320) {
                return "太太太远了！"
            } else return "远得没探测到宝藏！"
        }

        console.log(ZB)
        $("#map").click(
            function (e) {
                cishu++
                var eX = e.offsetX
                var eY = e.offsetY
                var jlX = eX - ZB.x
                var jlY = eY - ZB.y
                var jl = Math.sqrt(jlX * jlX + jlY * jlY)
                $("#jl").text(cishu.toString() + jlmc(jl))

                console.log(jl)
            }
        )
    </script>
</body>

</html>